<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="title" style="text-align: center">
        <div style="font-weight: bold; line-height: 32px">
          {{ addForm.id ? '修改试题' : '新增试题' }}
        </div>
        <el-button type="primary" plain size="small" @click="handleCancel"
          >返回列表</el-button
        >
      </div>

      <!-- 主体 -->
      <el-row>
        <el-form label-width="100px" :rules="rules" ref="form" :model="addForm">
          <el-col :span="8">
            <el-form-item label="学科名称" prop="subject_id">
              <el-select
                v-model="addForm.subject_id"
                placeholder="请选择学科"
                clearable
                @change="changeSub"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="目录名称" prop="directory_id">
              <el-select
                v-model="addForm.directory_id"
                placeholder="请选择目录"
                clearable
                @change="changeDir"
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="标签名称" prop="tag_id">
              <el-select
                v-model="addForm.tag_id"
                placeholder="请选择标签"
                clearable
                multiple
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="试题难度" :required="true">
              <el-radio-group v-model="addForm.difficulty">
                <el-radio :label="1">简单</el-radio>
                <el-radio :label="2">中等</el-radio>
                <el-radio :label="3">较难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="试题类型" prop="quest_type">
              <el-select
                v-model="addForm.quest_type"
                placeholder="选择题型"
                clearable
              >
                <el-option label="单选题" :value="1"></el-option>
                <el-option label="多选题" :value="2"></el-option>
                <el-option label="判断题" :value="3"></el-option>
                <el-option label="简答题" :value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否为真题" :required="true">
              <el-radio-group v-model="addForm.is_true_question">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="题干信息" :required="true">
              <WangEditor
                placeholder="请输入题干内容"
                ref="question"
                v-model="addForm.question"
              >
              </WangEditor>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="试题答案" :required="true">
              <AnswerQuestion
                :quest_type="quest_type"
                ref="quest_answer"
                :answer="addForm.quest_answer"
                :options="addForm.quest_options"
                :isEdit="addForm.id ? true : false"
                v-model="addForm"
              ></AnswerQuestion>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="答案解析">
              <WangEditor
                placeholder="请输入答案解析内容"
                ref="quest_remark"
                v-model="addForm.quest_remark"
              >
              </WangEditor>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <!-- 提交 -->
      <el-form label-width="100px" size="normal">
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import WangEditor from './WangEditor'
import AnswerQuestion from './AnswerQuestion'
import { addQuestion, updateQuestion } from '@/api/examQuestion'
import { Message } from 'element-ui'
export default {
  name: 'NewQuestion',
  components: {
    WangEditor,
    AnswerQuestion,
  },
  data() {
    return {
      rules: {
        subject_id: [
          { required: true, message: '请选择学科', trigger: 'change' },
        ],
      },
      validateFlag: false,
    }
  },
  props: {
    addForm: {
      type: Object,
      default: () => ({
        subject_id: '',
        directory_id: '',
        tag_id: [],
        difficulty: 1,
        is_true_question: 1,
        quest_type: '',
      }),
    },
  },
  computed: {
    ...mapGetters(['subjectList']),

    // 目录信息
    directoryList() {
      if (!this.addForm.subject_id) {
        return []
      } else {
        const result = this.subjectList.find(
          val => val.id == this.addForm.subject_id,
        )
        return result.children
      }
    },

    // 标签信息
    tagList() {
      if (this.addForm.subject_id && this.addForm.directory_id) {
        // 取出一级
        const top = this.subjectList.find(
          val => val.id == this.addForm.subject_id,
        )
        // 取出二级
        const child = top.children.find(
          val => val.id == this.addForm.directory_id,
        )
        return child?.children || []
      } else {
        return []
      }
    },

    // 试题类型
    quest_type() {
      return this.addForm.quest_type
    },
    question() {
      return this.addForm.question
    },
    quest_remark() {
      return this.addForm.quest_remark
    },
  },

  methods: {
    // 提交
    async handleSubmit() {
      const { addForm } = this
      console.log('点击提交', {
        ...addForm,
      })
      try {
        if (!this.addForm.question || this.addForm.question === '<p><br></p>') {
          Message.error('请输入题干信息')
          return false
        }
        if (this.addForm.quest_type === '') {
          Message.error('请选择试题类型')
          return false
        } else if (this.addForm.quest_type === 1) {
          if (this.addForm.quest_answer === '') {
            Message.error('请选择单选题题答案')
            return false
          }
          if (this.addForm.quest_options.some(val => val.content === '')) {
            Message.error('请输入所有单选题选项')
            return false
          }
        } else if (this.addForm.quest_type === 2) {
          if (this.addForm.quest_answer.split(',').length < 2) {
            Message.error('请选择至少两个多选题题答案')
            return false
          }
          if (this.addForm.quest_options.some(val => val.content === '')) {
            Message.error('请输入所有多选题选项')
            return false
          }
        } else if (this.addForm.quest_type === 3) {
          if (this.addForm.quest_answer === '') {
            Message.error('请选择判断题题答案')
            return false
          }
        } else if (this.addForm.quest_type === 4) {
          if (
            this.addForm.quest_answer === '' ||
            this.addForm.quest_answer === '<p><br></p>'
          ) {
            Message.error('请输入问答题答案')
            return false
          }
        }

        if (addForm.id) {
          await updateQuestion(addForm)
        } else {
          await addQuestion(addForm)
        }
        Message.success(addForm.id ? '修改成功' : '添加成功')
        this.handleCancel()
      } catch (error) {
        return console.log(error)
      }
    },

    // 取消
    handleCancel() {
      this.$parent.addHandler()
      this.$parent.rowDataInit()
    },

    // 修改学科
    changeSub() {
      this.addForm.directory_id = ''
      this.addForm.tag_id = []
    },

    // 修改目录
    changeDir() {
      this.addForm.tag_id = []
    },
  },

  created() {
    this.addForm.tag_id = []
  },

  watch: {
    addForm: {
      handler(val) {
        this.$emit('update:addForm', val)
      },
      deep: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
::v-deep .el-card__header {
  padding: 14px 18px;
}
</style>
